<template>
  <div>
    <el-card>
      <div class="top">
        <el-row>
          <p style="font-size: 18px">考勤管理</p>
          <div class="block">
            <el-date-picker
              v-model="value1"
              format="YYYY 年 MM 月 DD 日"
              value-format="YYYY/MM/DD"
              @change="aaa"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            v-model="queryinfo.name"
          >
            <template #prepend>
              <el-select
                v-model="queryinfo.name"
                style="width: 130px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in toparea"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
            <template #append>
              <el-button icon="el-icon-search" @click="classList"></el-button>
            </template>
          </el-input>
        </el-row>
      </div>
    </el-card>
    <el-card>
      <div class="center">
        <div class="biaoti">今日课表</div>
        <div class="top1">
          <el-row>
            <div class="input1">
              <el-checkbox
                size="medium "
                class="input"
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <!-- <input type="checkbox" class="input" /> <i>全选</i> -->
            </div>
            <div class="kqbutton">考勤</div>
          </el-row>
        </div>
        <div class="ydy" v-for="item in checkzs" :key="item.id">
          <!-- <div v-if="item.coursedate == value1"> -->
            <el-row>
              <div class="checkbox">
                <el-checkbox v-model="checkAll" size="medium "></el-checkbox>
              </div>
              <div class="touxiang">
                <img src="../../assets/images/abc.gif" alt="" />
              </div>
              <div class="zi1">{{ item.studentid }}</div>
              <div class="zi2">二对一排课</div>
              <div class="shu">
                <i class="el-icon-reading"></i>
                <p>{{ item.coursename }}</p>
              </div>
              <div class="shu">
                <i class="el-icon-alarm-clock"></i>
                <p>{{ item.starttime }}</p>
              </div>
              <div class="shu">
                <i class="el-icon-loading"></i>
                <p>{{ item.teachername }}</p>
              </div>
              <div class="right1">
                <i class="el-icon-s-claim"></i>
                <p>{{ item.checkedName }}</p>
              </div>
              <div class="right2">
                <i class="el-icon-edit-outline"></i>
                <p @click="qiandao">签到</p>
              </div>
            </el-row>
          <!-- </div> -->
        </div>
        <div class="ydy" v-for="item in checkzs" :key="item.id">
          <el-row>
            <div class="checkbox">
              <el-checkbox v-model="checkAll" size="medium "></el-checkbox>
            </div>
            <div class="zi1">{{ item.classrooms }}</div>
            <div class="zi2">班级排课</div>
            <div class="shu">
              <i class="el-icon-reading"></i>
              <p>{{ item.teacherid }}</p>
            </div>
            <div class="shu">
              <i class="el-icon-alarm-clock"></i>
              <p>{{ item.endtime }}</p>
            </div>
            <div class="shu">
              <i class="el-icon-loading"></i>
              <p>{{ item.coursename }}</p>
            </div>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 55px;
  // background-color: aquamarine;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  //   box-shadow: 0px 3px 5px 3px red;
  margin-top: -10px;
  // border-bottom: 1px solid rgb(219, 219, 219);
  // border-top: 1px solid rgb(219, 219, 219);
  // border-left: 1px solid rgb(219, 219, 219);
  // border-right: 1px solid rgb(223, 223, 223);
  p {
    width: 117px;
    height: 55px;
    background-color: rgb(255, 255, 255);
    line-height: 55px;
    border-right: 1px solid rgb(216, 216, 216);
    // border-left: 1px solid rgb(212, 212, 212);
    // border-bottom: 1px solid rgb(212, 212, 212);
    // border-top: 1px solid rgb(212, 212, 212);
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
  .block {
    height: 30px;
    margin-top: 7px;
    margin-left: 20px;
    // color: #9ea4b0;
  }
  .input-with-select {
    width: 400px;
    height: 30px;
    margin-top: 8px;
    margin-left: 10px;
  }
}
.center {
  width: 100%;
  height: 100%;
}

.center .biaoti {
  height: 20px;
  // background-color: red;
  font-size: 12px;
  margin-top: 5px;
  color: #333;
}

.top1 {
  width: 100%;
  // height: 50px;
  // margin-bottom: 20px;
  margin-left: 40px;
  .input1 {
    margin-top: 10px;
    height: 20px;
    // background-color: blue;
  }
  .input {
    margin-top: 5px;
    // width: 20px;
    // height: 20px;
    // margin-top: 20px;
  }
}
i {
  // margin-top: 40px;
  margin-left: 5px;
  font-size: 12px;
}
.kqbutton {
  margin-left: 15px;
  width: 150px;
  height: 40px;
  border-radius: 4px;
  background-color: #4385f5;
  font-size: 17px;
  text-align: center;
  color: #fff;
  line-height: 40px;
  cursor: pointer;
}
.ydy {
  height: 70px;
  // background-color: chartreuse;
  border: 1px rgb(228, 228, 228) solid;
  margin-top: 20px;
  .checkbox {
    margin-top: 29px;
    margin-left: 40px;
    width: 18px;
    height: 18px;
    // background-color: chocolate;
  }
  .touxiang {
    margin-left: 20px;
    width: 30px;
    height: 30px;
    background-color: coral;
    margin-top: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .zi1 {
    width: 100px;
    height: 70px;
    // background-color: cornflowerblue;
    line-height: 70px;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zi2 {
    margin-top: 20px;
    width: 80px;
    height: 30px;
    background-color: #c6eae0;
    font-size: 12px;
    color: #2acd72;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shu {
    margin-left: 20px;
    width: 110px;
    height: 70px;
    // background-color: cornflowerblue;
    display: flex;
    i {
      font-size: 23px;
      color: rgb(143, 143, 143);
      line-height: 70px;
    }
    p {
      margin-left: 6px;
      font-size: 12px;
      line-height: 70px;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .right1 {
    margin-left: 410px;
    width: 110px;
    height: 70px;
    // background-color: darkblue;
    display: flex;
    i {
      font-size: 23px;
      color: rgb(143, 143, 143);
      line-height: 70px;
    }
    p {
      margin-left: 10px;
      font-size: 12px;
      line-height: 70px;
      color: #333333;
    }
  }
  .right2 {
    width: 110px;
    height: 70px;
    // background-color: darkblue;
    color: #4381fa;
    display: flex;
  }
  i {
    font-size: 23px;
    line-height: 70px;
  }
  p {
    cursor: pointer;
    margin-left: 10px;
    font-size: 12px;
    line-height: 70px;
  }
}
</style>
<script>
export default {
  data() {
    return {
      value1: new Date(),
      checkAll: true,
      checkzs: [],
      studentid: [],
      queryinfo: {
        name: "卧室恁碟",
      },
    };
  },
  created() {
    this.checkList();
    // this.xues();
  },
  methods: {
    // aaa() {
    //   console.log(this.value1);
    // },
    //学生
    // async xues() {
    //   // console.log(this.studentid.id);
    //   const { data: res } = await this.$http.get(
    //     "http://www.eshareedu.cn/edusystems/api/students/list"
    //   );
    //   console.log(res.data.list);
    //   if (res.errCode == "10000") {
    //     this.studentid = res.data.list;
    //   }
    // },
    //学生

    // 请求考勤数据
    async checkList() {
      console.log(this.value1);
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/coursetables/checked"
      );
      console.log(res);
      if (res.errCode == "10000") {
        this.checkzs = res.data.list;
      } else {
        this.$message.error("请求考勤管理数据失败");
      }
    },
    // 请求数据变活
    // qiandao() {
    //   alert(132);
    // },
    // 签到
  },
};
</script>
